<template>
  <div class="mine">
      <h1>个人中心 &gt;</h1>
      <div class="mine_main">
        <div class="mine_avatar">
            <el-avatar
            size="50px"
            :src="src"
            />
        </div>
        <div class="mine_cont" v-if="userInfo">
           <p>
               <span>账号：</span><span>{{userInfo.account}}</span>
           </p>
           <p v-if="userInfo.name">
               <span>姓名：</span><span>{{userInfo.name}}</span>
           </p>
           <p>
               <span>权限：</span><span>{{role[userInfo.role-1]}}</span>
           </p>
           <p v-if="userInfo.classInfo">
               <span>所带班级：</span><span>{{userInfo.classInfo.slice(0,2)}} 年级--{{userInfo.classInfo.slice(2,4)}} 班</span>
           </p>
           <p v-if="userInfo.kemu">
               <span>所带科目：</span><span v-if="userInfo.kemu==79">数学</span><span v-if="userInfo.kemu==99">语文</span><span v-if="userInfo.kemu==97">英语</span>
           </p>
        </div>
        <div class="mine_footer" >
            <el-button type="danger" @click="resetPass">修改密码</el-button>
        </div>
      </div>
           <el-dialog
            v-model="dialogVisible"
            title="修改登录密码"
            width="30%"
            :before-close="handleClose"
        >
            <el-form
                label-position="top"
                label-width="100px"
                :model="form"
                class="myform"
                ref="myform"
                :rules="rules"
            >   
                    <el-form-item 
                        label="旧密码"
                        prop="paw"
                    >
                        <el-input clearable  v-model="form.paw" :prefix-icon="Lock"  show-password type="password"  placeholder="请输入旧密码" />
                    </el-form-item>
                    <el-form-item 
                        label="新密码"
                        prop="newpaw"

                    >
                        <el-input clearable @blur="checkDbNewPass" v-model="form.newpaw" :prefix-icon="Lock"  show-password type="password"  placeholder="请输入新密码" />
                    </el-form-item>
                    <el-form-item 
                        label="确认新密码"
                        prop="dbnewpass"
                    >
                        <el-input clearable v-model="form.dbnewpass" :prefix-icon="Lock"  show-password type="password"  placeholder="请确认新密码" />
                    </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="danger" @click="changePass"
                    >修改</el-button
                    >
                </span>
            </template>
        </el-dialog>
  </div>
</template>

<script>
import {reactive,toRefs,ref,computed,onMounted} from "vue"
import {useStore} from 'vuex'
import {ajax} from '@/api'
//引入图标
import {SwitchButton, Lock,ArrowDown,ArrowLeftBold,ArrowRightBold}  from "@element-plus/icons-vue"
//提示框
import {ElMessage,ElMessageBox} from "element-plus"
//路由跳转
import {useRouter} from 'vue-router'
//引入正则库
import {reg} from "@/utils/validate"
export default {
setup(props) {
    const myform = ref()
     const router=useRouter()
    const store=useStore()
    const userInfo=computed(()=>store.state.userInfo)
    const resetPass=()=>{
        console.log(111);
        state.dialogVisible = true;
    }
     
       //判断二次密码
        const checkDbPass = (rule,value,callback)=>{
            if(state.form.newpaw!=value){
                callback(new Error('两次密码不一样!!!'))
            }else{
                callback()
            }
        }
        const checkDbNewPass = ()=>{
            // 两次密码正则通过 才回去比较2次密码是否一致 
            if(reg.pwd.test(state.form.newpaw) && reg.pwd.test(state.form.dbnewpass) ){
                console.log(state.form.newpaw,state.form.dbnewpass);
                myform.value.validateField('dbnewpass')
            }
        }
        
        //判断旧密码是否正确
        const checkOldPass=(rule,value,callback)=>{
             if(state.passwordOld!=value){
                callback(new Error('旧密码错误!!!'))
            }else{
                callback()
            }
        }
        // 获取用户旧密码
         const getUserinfo = async()=>{
           let res = await ajax.getusernfo()
            console.log(res);
            state.passwordOld=res.userInfo[0].paw
            console.log(state.passwordOld);
        
        }
            onMounted(() => {
                getUserinfo()
            })
                //关闭弹出框
         const handleClose = ()=>{
            state.dialogVisible = false;
        }

        //提交修改的密码
          const changePass = ()=>{
            myform.value.validate(async valid=>{
                if(valid){
                    let res = await ajax.changeuser({
                        password:state.form.newpass 
                    })
                    if(res.code==200){
                        // 重新登录
                       router.push({name:'login'})
                        sessionStorage.removeItem('token')
                        store.commit('changeUserInfo',null)
                    }
                }else{
                    ElMessage.error("请输入有效的信息")
                }
            })
        }
        const state=reactive({
         src:require("@/assets/images/xiaoxin_1.jpg"),
          role:['学生','教师','教务','管理员'],
          dialogVisible:false,
          SwitchButton,
          form:{},
          Lock,
          passwordOld:null,
          classInfo:null,
              rules:{
                paw:[
                    {required: true, message: '密码必填'},
                    {
                        pattern:reg.pwd,message:'密码格式不正确'
                    },
                     {
                        validator:checkOldPass,
                        message:'旧密码错误',
                        trigger: 'blur'
                    }
                ],
                newpaw:[
                    {required: true, message: '新密码必填'},
                    {
                        pattern:reg.pwd,message:'密码格式不正确'
                    }
                ],
                dbnewpass:[
                    {required: true, message: '确认密码必填'},
                    {
                        pattern:reg.pwd,message:'密码格式不正确'
                    },
                    {
                        validator:checkDbPass,
                        message:'两次密码不一样',
                        trigger: 'blur'
                    }
                ],
            }
     })
    return{
        ...toRefs(state),
        reactive,
        resetPass,
        userInfo,
        myform,
        changePass,
        checkDbNewPass,
        handleClose,
       
    }
}
}
</script>

<style lang="scss" scoped>
.el-main{
    position: relative;
    .mine_main{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border-radius: 10px;
        height: 350px;
        width: 300px;
        padding: 20px;
        .mine_avatar{
            height: auto;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            .el-avatar{
                height: 100px;
                width: 100px;
            }
           
        }
        .mine_cont{
            p{
                margin-top: 10px;
                font-size: 20px;
                font-weight: 700;
            }
        }
        .mine_footer{
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
    }
}
</style>